<template>
  <div class="detail">
    <head-top head-title="选择分类" go-back="true" right-title="提交"></head-top>
    <div class="main-wrapper">
      <div class="addpic">
        <div class="pic-detail">
          <h4 class="title">请添加封面图</h4>
        </div>
        <div class="title">
          <label for="">标题</label>
          <input type="text" placeholder="请输入标题名称（不超过30个字）" maxlength="30">
        </div>
        <div class="title">
          <label for="">规格</label>
          <input type="text" placeholder="如500g，5小时，瓶" maxlength="30">
        </div>
        <div class="title">
          <label for="">价格</label>
          <input type="text" placeholder="请输入价格" maxlength="30">元
        </div>
        <div class="title">
          <label for="">库存</label>
          <input type="text" placeholder="请输入商品的件数" maxlength="30">件
        </div>
      </div>
      <div class="mint-checklist page-part">
        <label class="mint-checklist-title">配送方式（可多选）</label>
        <a class="mint-cell">
          <!---->
          <div class="mint-cell-left"></div>
          <div class="mint-cell-wrapper">
            <div class="mint-cell-title">
              <!---->
              <label class="mint-checklist-label">
                <span class="mint-checkbox"><input type="checkbox" class="mint-checkbox-input" value="自提">
                  <span class="mint-checkbox-core"></span>
                </span>
                <span class="mint-checkbox-label">自提</span>
              </label>
            </div>
            <div class="mint-cell-value">
              <span></span>
            </div>
          </div>
          <div class="mint-cell-right"></div>
          <!---->
        </a>
        <a class="mint-cell">
          <!---->
          <div class="mint-cell-left"></div>
          <div class="mint-cell-wrapper">
            <div class="mint-cell-title">
              <!---->
              <label class="mint-checklist-label">
                <span class="mint-checkbox"><input type="checkbox" class="mint-checkbox-input" value="快递">
                  <span class="mint-checkbox-core"></span>
                </span>
                <span class="mint-checkbox-label">快递</span>
              </label>
            </div>
            <div class="mint-cell-value">
              <span></span>
            </div>
          </div>
          <div class="mint-cell-right"></div>
          <!---->
        </a>
        <a class="mint-cell">
          <!---->
          <div class="mint-cell-left"></div>
          <div class="mint-cell-wrapper">
            <div class="mint-cell-title">
              <!---->
              <label class="mint-checklist-label">
                <span class="mint-checkbox"><input type="checkbox" class="mint-checkbox-input" value="送货上门">
                  <span class="mint-checkbox-core"></span>
                </span>
                <span class="mint-checkbox-label">送货上门</span>
              </label>
            </div>
            <div class="mint-cell-value">
              <span></span>
            </div>
          </div>
          <div class="mint-cell-right"></div>
          <!---->
        </a>
      </div>
      <div class="seller-des">
        <div class="seller-top">
          <span class="bgimg"></span>
          <span class="des">邻居卖家介绍</span>
          <span class="more"> 更多</span>
        </div>
        <div class="background">
        </div>
        <div class="upload"></div>
      </div>
    </div>
  </div>
</template>

<script>
import headTop from '../header/Header.vue'
export default {
  data () {
    return {}
  },
  components: {
    headTop
  }
}
</script>

<style lang="scss">
@import "../../common/sass/base.scss";
@import "../../common/sass/mixin.scss";
.detail {
  .main-wrapper {
    .addpic {
      padding: 0 10px;
      background-color: #fff;
      .pic-detail {
        height: 186px;
        @include border-bottom-1px(rgb(217, 217, 217));
      }
      .title {
        display: flex;
        height: 44px;
        line-height: 44px;
        font-size: 15px;
        @include border-bottom-1px(rgb(217, 217, 217));
        &:last-child {
          @include border-none();
        }
        input {
          flex: 1;
          font-size: 12px;
          border: none;
          outline: none;
          padding-left: 12px;
        }
      }
    }
    .mint-checklist {
      .mint-cell{
        margin:0 10px;
          @include border-bottom-1px(rgb(217, 217, 217));
        &:last-child {
          @include border-none();
        }
      }
      background-color: #fff; 
      .mint-checklist-title{
      height: 44px; 
      line-height: 44px; 
      color: #000;
      font-size: 15px; 
      @include border-bottom-1px(rgb(217, 217, 217));
      }
      .mint-checkbox-label{
        color: #666;
        font-size:15px;
      }
      .mint-cell-wrapper{
        background:none;
        padding: 0;
      }
    }
    .seller-des{
      margin-top: 10px;
      background-color: #fff;
      position: relative;
      .seller-top{
        height: 44px;
        line-height: 44px;
        font-size: 15px;
        padding:0 10px;
        position: relative;
        .more{
          float: right;
          color: #666;          
        }
        .bgimg{
          position: absolute;
          top: 14px;
          left: 0px;
          width: 3px;
          height: 15px;
          background-size: 3px 15px;
          background-repeat: no-repeat;
          @include bgimg('./images/xiantiao');
        }
      }
      .background {
        display: block;
        width: 100%;
        height: 208px;
        background-size: 100% 208px;
        background-repeat: no-repeat;
        @include bgimg('./images/tupian');
      }
    }
  }
}
</style>
